<template>
  <div class="addData">
    <div class="infoContent">
      <el-row :gutter="1">
        <el-col
          :offset="1"
          :span="22"
        >
          <el-form
            ref="form1"
            :model="organizationInfo"
            :rules="rules"
            label-width="150px"
            class="demo-ruleForm"
          >
            <el-form-item
              label="数据编码:"
              prop="encode"
            >
              <el-input
                v-model="organizationInfo.encode"
                :disabled="type == 'edit'"
                clearable
                placeholder="请输入数据编码"
              />
            </el-form-item>
            <el-form-item
              label="数据名称:"
              prop="name"
            >
              <el-input
                v-model="organizationInfo.name"
                :disabled="type == 'edit'"
                clearable
                placeholder="请输入数据名称"
              />
            </el-form-item>
            <el-form-item
              label="共享策略:"
              prop="type"
            >
              <el-select
                v-model="organizationInfo.type"
                placeholder="请选择共享策略"
                clearable
                style="width:100%"
              >
                <el-option
                  v-for="item of shareType"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="[2, 4, 6].includes(organizationInfo.type)"
              label="下级控制策略:"
            >
              <el-checkbox-group v-model="organizationInfo.controllerType">
                <el-checkbox label="1">可新增</el-checkbox>
                <el-checkbox label="2">可新增下级</el-checkbox>status
                <el-checkbox label="3">可修改</el-checkbox>
                <el-checkbox label="4">可删除</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item
              label="状态:"
              prop="status"
            >
              <el-radio-group v-model="organizationInfo.status">
                <el-radio :label="0">启用</el-radio>
                <el-radio :label="1">停用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="备注:">
              <el-input
                v-model="organizationInfo.description"
                :rows="3"
                type="textarea"
              />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <p class="stepCon">
        <span
          class="greenBtn"
          @click="handleClose"
        >取消</span>
        <span
          class="greenBtn"
          @click="saveOrg"
        >保存</span>
      </p>
    </div>
  </div>
</template>
<script>
import { addDict, updateDict } from '@/api/dataCenter'
import { USER_TYPE } from './constants'

export default {
  name: 'AddData',
  props: {
    detail: {
      type: Object,
      default() {
        return {}
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      rules: {
        encode: [
          { required: true, message: '请填写数据编码', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请填写数据名称', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择共享策略', trigger: 'change' }
        ],
        levels: [
          { required: true, message: '请填写行业属性', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'blur' }
        ],
        controllerType: [
          { required: true, type: 'array', min: 1, message: '请选择策略', trigger: 'blur' }
        ]
      },
      organizationInfo: {
        encode: '',
        name: '',
        phid: '',
        type: '',
        levels: 1,
        status: 0,
        description: '',
        controllerType: []
      },
      shareType: USER_TYPE
    }
  },
  inject: [],
  created() {
    console.log('detail', this.detail)
    this.organizationInfo = {
      ...this.organizationInfo,
      ...this.detail,
      [this.type === 'edit' && 'controllerType']: (this.detail.controllerType || '').split(',')
    }
    console.log('create', this.organizationInfo)
  },
  methods: {
    saveOrg() {
      this.$refs.form1.validate(valid => {
        if (valid) {
          const operatFun = this.type === 'add' ? addDict : updateDict
          this.handleAddOrUpdateDict(operatFun)
        }
      })
    },
    handleAddOrUpdateDict(operatFun) {
      console.log('add', this.organizationInfo)
      operatFun({
        ...this.organizationInfo,
        controllerType: this.organizationInfo.controllerType.join(',')
      }).then((res) => {
        this.$msgBox.show('修改成功')
        this.$emit('close', true)
      }).catch((err) => {
        this.$msgBox.error(err.message)
        this.handleClose()
      })
    },
    handleClose() {
      this.$parent.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.addData {
  font-size: 0.16rem;
  // min-height: 500px;
  position: relative;
  .infoType {
    height: 30px;
    line-height: 30px;
    background: #f1f1f1;
    > li {
      float: left;
      height: 100%;
      width: 80px;
      cursor: pointer;
      text-align: center;
      &.active {
        background: #fff;
        cursor: default;
        color: #2e91ff;
      }
    }
  }
  .infoContent {
    padding: 20px 20px 40px;
  }
  .registrationInfo {
    text-align: center;
    > li {
      margin: 0 auto;
      display: inline-block;
      overflow: visible;
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
      > div {
        float: left;
        width: 75px;
        text-align: right;
        margin-right: 5px;
        &:nth-of-type(2) {
          float: left;
          width: 700px;
          > div {
            float: left;
            width: 300px;
            > div {
              width: 300px;
            }
            &:last-of-type {
              float: right;
              width: 380px;
              > div {
                width: 75px;
                display: inline-block;
                &:last-of-type {
                  width: 300px;
                }
              }
            }
          }
        }
      }
      .longW {
        width: 700px;
        > div {
          width: 700px !important;
        }
      }
    }
  }
  .attechment {
    height: 410px;
  }
  .stepCon {
    text-align: right;
    color: $blue;
    position: absolute;
    bottom: 10px;
    right: 20px;
    span {
      cursor: pointer;
      margin-left: 20px;
    }
  }
  .red-line {
    height: 1px;
    margin-bottom: 25px;
    background: red;
  }
}
.warningColor {
  color: $pink;
}
</style>
